<template>
  <div class="tooltip-box">
    <div
      class="audio-box"
      v-if="props.info.audio && props.info.audio.url"
      :style="{
        backgroundImage: `url(${publicUrls + 'free/style14/audioIcon.png'})`,
      }"
      @click="audioplay(true)"
    ></div>
    <span class="doorIcon" :class="{ 'audio-rotate': isPlay }">&#xe688;</span>
  </div>
  <audio
    @ended="ended"
    v-if="props.info.audio && props.info.audio.url"
    :src="urls + props.info.audio.url"
    ref="audioRef"
  ></audio>
</template>

<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { defineComponent, ref, defineExpose } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax3.vue';
const props = defineProps({
  info: {
    type: Object,
  },
});
const emit = defineEmits(['audioplayFlase']);
const store = useProjectStore();
const ImgVisible = ref(false);
const audioRef = ref(null);
const videoRef = ref(null);
const isPlay = ref(false);
const audioplay = (flag: boolean = true) => {
  if (audioRef.value.paused && flag) {
    audioRef.value.play();
    if (videoRef.value) {
      videoRef.value.pause();
    }

    isPlay.value = true;
  } else {
    audioRef.value.pause();
    isPlay.value = false;
  }
};
const ended = () => {
  isPlay.value = false;
};
const videoplay = () => {
  audioRef.value.pause();
  isPlay.value = false;
};
defineExpose({ videoplay });
</script>

<style scoped lang="less">
.audio-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // padding: 16px 14px 8px 15px;
  z-index: 22;
  animation: audio-rotate1 20s linear infinite;
  @keyframes audio-rotate1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.doorIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  font-size: 20px;
  z-index: 23;
  pointer-events: none;
}
.audio-icon1 {
  width: 50px;
  height: 50px;
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
}
.audio-icon2 {
  position: absolute;
  top: 28px;
  left: 27px;
  width: 26px;
  height: 26px;
  z-index: 5;
}
.audio-rotate {
  animation: audio-rotate 5s linear infinite;
  @keyframes audio-rotate {
    0% {
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
  }
}
.audio-parent-rotate {
  animation: audio-rotate2 2s linear infinite;
  @keyframes audio-rotate2 {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(15px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
.tooltip-box {
  display: flex;
  position: relative;
  width: 50px;
  height: 50px;
}
// .tooltip-conetnt {
//   opacity: 0;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   // justify-content: center;
//   position: absolute;
//   left: 50%;
//   bottom: -32px;
//   transform: translateX(-50%);
//   width: 50px;
//   height: 24px;
//   margin: 2px 0;
//   background: rgba(243, 234, 219, 1);
//   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);

//   border-radius: 4px;
//   span {
//     font-family: Microsoft YaHei;
//     font-size: 13px;
//     font-weight: 400;
//     line-height: 20px;
//     text-align: center;
//      color: rgba(180, 170, 152, 1);
//     margin-top: 2px;
//   }
//   :deep(.t-popup__arrow) {
//     top: -3px;
//     left: 24px;
//     // background: rgba(147, 178, 170, 1);
//    border-color: rgba(243, 234, 219, 1);
//   }
//   .t-popup__arrow::before {
//      background: rgba(243, 234, 219, 1);

//   }
// }
.tooltip-box:hover {
  .tooltip-conetnt {
    opacity: 1;
  }
}
</style>
